<template>
<div class="xxx">
  <div class="box">
      <div class="user" v-for="(item,index) in arr" :key="index">
          <img :src="item.imgsrc" alt="">
          <p>{{item.account}}</p>
      </div>
      <div class="center">
          <div class="top">
              <p class="top_p1">我的订单</p>
              <p class="top_p2">查看全部></p>
          </div>
          <div class="bottom">
              <ul class="bottom_ul">
                  <li class="li1" @click="fn">
                      <span></span>
                      <p>待付款</p>
                  </li>
                  <li class="li2">
                      <span></span>
                      <p>待分享</p>
                  </li>
                  <li class="li3">
                      <span></span>
                      <p>待发货</p>
                  </li>
                  <li class="li4">
                      <span></span>
                      <p>待收货</p>
                  </li>
                  <li class="li5">
                      <span></span>
                      <p>待评价</p>
                  </li>
              </ul>
          </div>
      </div>
      <div class="favorite">
          <div>
              <span></span>
              <p>收藏夹</p>
          </div>
          <p class="p3">></p>
      </div>
      <div class="jing">
          <div class="jjj">
            <p>————</p>
            <div>精选好货</div>
            <p>————</p>
          </div>
      </div>
      <div class="content">
          <div class="content_content" v-for="(item,index) in  arr1" :key="index">
              <img :src="item.imgSrc" alt="">
              <p class="p1">{{item.title}}</p>
              <div class="bottom">
                  <p class="p2">{{item.newPrice}}￥</p>
                  <p class="p3">拼多多价{{item.pddPrice}}元</p>
              </div>
          </div>
      </div>
  </div>
</div>
</template>

<script>
import axios from "axios"
export default {
    name:"Mine",
    data(){
        return{
            arr:[],
            arr1:[]
        }
    },
    components:{

    },
    created(){
        this.ad()
        this.contents()
    },
    methods:{
        async ad(){
            let {data} = await axios.get('./mine.json')
            this.arr = data.login
            console.log(data)
        },
        fn(){
            location.href="./cart.html"
        },
        async contents(){
            let {data} = await axios.get('./pdd.json')
            this.arr1 = data.home.product[0].productList;
            console.log(data.home.product[0].productList)
            
            // this.arr1.forEach(item =>{
            //     // console.log(item.productList)
            // })
        }
    }
}
</script>

<style scoped>
.xxx{
    width: 100%;
    background:rgb(230, 230, 230);
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
}
.box{
    width: 100%;
}
.box .user{
    height: 2.78rem;
    background-image: url("https://funimg.pddpic.com/jinbao/center_bg.png?imageView2/2/w/1300/q/80");
    display: flex;
}
.box .user img{
    margin-left:.6rem;
    margin-top:.5rem;
    width: 1.04rem;
    height: 1.04rem;
}
.box .user p{
    margin-top:.72rem;
    margin-left:.4rem;
    font-size:22px;
    font-weight:600;
    color:#fff;
}
.box .center{
    width: 7.02rem;
    height: 2.46rem;
    background:#fff;
    border-radius: 0.14rem;
    position: absolute;
    top:1.9rem;
    left:.22rem;
}
.box .center .top{
    width: 100%;
    height: .68rem;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}
.box .center .top .top_p1{
    margin-left:.35rem;
    font-size:16px
}
.box .center .top .top_p2{
    font-size:14px;
    color:#ccc;
    margin-right:.35rem;
}
.box .center .bottom{
    width: 100%;
    height: 1.64rem;
}
.box .center .bottom .bottom_ul{
    width: 100%;
    height:100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}
.box .center .bottom .bottom_ul li{
    display: flex;
    width: 1.04rem;
    height: 1.32rem;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}
.box .center .bottom .bottom_ul .li1 span{
    display: block;
    background-image: url("");
    background-size:.5rem;
    width: .5rem;
    height: .5rem;
}
.box .center .bottom .bottom_ul .li2 span{
    display: block;
    background-image: url("");
    background-size:.5rem;
    width: .5rem;
    height: .5rem;
}
.box .center .bottom .bottom_ul .li3 span{
    display: block;
    background-image: url("");
    background-size:.5rem;
    width: .5rem;
    height: .5rem;
}
.box .center .bottom .bottom_ul .li4 span{
    display: block;
    background-image: url("");
    background-size:.5rem;
    width: .5rem;
    height: .5rem;
}
.box .center .bottom .bottom_ul .li5 span{
    display: block;
    background-image: url("");
    background-size:.5rem;
    width: .5rem;
    height: .5rem;
}
.box .favorite{
    display: flex;
    margin-top:1.9rem;
    width: 7.02rem;
    height: .9rem;
    border-radius: 0.14rem;
    background:#fff;
    margin-left:.22rem;
    align-items: center;
    justify-content: space-between;
}
.box .favorite div{
    display: flex;
    align-items: center;
    margin-left:.2rem;
}
.box .favorite div span{
    display: block;
    background-image: url("");
    background-size:.5rem;
    width: .5rem;
    height: .5rem;
    margin-right:.1rem;
}
.box .favorite .p3{
    margin-right:.2rem;
    font-size:18px;
    color:#ccc;
}
.box .jing{
    width: 100%;
    height: .92rem;
    display: flex;
    font-size:16px;
    align-items: center;
    justify-content: center;
}
.box .jing .jjj{
    display: flex;
}
.box .jing div{
    margin:0 0.4rem;
}
.box .jing p{
    color:#ccc;
}
.content{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.content .content_content{
    height: 5.7rem;
    width: 3.72rem;
    background: #fff;
    display: flex;
    flex-wrap: wrap;
}
.content_content img{
    width: 3.72rem;
    height: 3.72rem;
}
.content_content .p1{
    margin-left:.1rem;
}
.content_content .bottom{
    display: flex;
    align-items: center;
}
.content_content .bottom .p2{
    color:red;
    padding:.1rem;
}
.content_content .bottom .p3{
    color:red;
    border:1px solid red;
    padding:.1rem;
}
</style>